/**
 * 波段规划维护
 */
import * as React from 'react'
import { Card, Form, Input, Button, Select, message, DatePicker, InputNumber, Cascader } from 'antd'
import Authentication from '../../router/Authentication'
import { PageHeaderLayout, FormFileUpload, FormUtils } from '../../components'
import { FormComponentProps } from 'antd/lib/form/Form'
import { post, CREATE_BAND, UPDATE_BAND } from '../../service/api'
const FormItem = Form.Item
const Option = Select.Option
const { TextArea } = Input
export interface Props{
  record: any
  band: any
  history: any
  categorys: any []
  submitting: boolean
}

export interface State {
  file: any,
  entity: any
}

@Authentication
class BandForm extends React.Component<Props & FormComponentProps, State> {
  state = {
    file: {
      uid: '',
      url: ''
    },
    entity: {
      id: ''
    }
  }
  getPic (pic: any []): string {
    if(pic && pic.length>0) return pic[0].guid
    else return ''
  }

  componentWillReceiveProps(nextProps: Props & FormComponentProps) {
    const { form, record } = nextProps
    const { entity } = this.state
    if(record && JSON.stringify(entity)!=JSON.stringify(record)) {
      let row = record
      row.band_style=[row.dlid==null?"0": row.dlid.toString(), row.xlid==null?"0": row.xlid.toString()]
      FormUtils.setFieldsValue(form, row)
      this.setState({
        file: {
          uid: row.Enclosure,
          name: '查看附件',
          status: 'done',
          url: row.url
        },
        entity: row
      })
    }
  }

  //保存
  handleSave = (e: any) => {
    e.preventDefault()
    this.props.form.validateFieldsAndScroll((err: any, values: any) => {
      if (!err) {
        const { entity: { id }, file } = this.state
        values.id = id
        values.Enclosure = file.uid
        values.dlid = values.band_style[0]
        values.xlid = values.band_style.length > 1?values.band_style[1]: "0"
        values.indate = values.indate != null?values.indate.format("YYYY-MM-DD"):""
        values.uploaddate = values.uploaddate !=null?values.uploaddate.format("YYYY-MM-DD"):""
        post(id?UPDATE_BAND: CREATE_BAND, values).then((res: any) => {
          if (res.code == '1') {
            message.success('操作成功！')
            this.props.history.goBack()
          }else {
            message.error(res.errMsg)
          }
        })
      }
    })
  }
  render () {
    const { form, submitting, categorys } = this.props
    const { file } = this.state
    const { getFieldDecorator } = form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 34 },
        sm: { span: 12 },
        md: { span: 15 },
      },
    }
    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    }
    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <Form onSubmit={this.handleSave} hideRequiredMark style={{ marginTop: 8 }}>
            <FormItem label="年份" {...formItemLayout}>
              {getFieldDecorator('Year', { 
                rules: [{ required: true, message: '请选择年份' }]})(
                <Select placeholder="请选择年份">
                  <Option value="2018">2018</Option>
                  <Option value="2019">2019</Option>
                  <Option value="2020">2020</Option>
                  <Option value="2021">2021</Option>
                  <Option value="2022">2022</Option>
                  <Option value="2023">2023</Option>
                  <Option value="2024">2024</Option>
                  <Option value="2025">2025</Option>
                </Select>
              )}
            </FormItem>
            <FormItem label="波段" {...formItemLayout}>
              {getFieldDecorator('bandname', { 
                  rules: [{ required: true, message: '请输入波段' }]})(
                <Input placeholder="请输入波段"/>
              )} 
            </FormItem>
            <FormItem label="分类" {...formItemLayout}>
              {getFieldDecorator('band_style', { 
                  rules: [{ required: true, message: '请选择分类' }]})(
                  <Cascader options={categorys} changeOnSelect placeholder="请选择分类"/>
              )} 
            </FormItem>
            <FormItem label="提供样版数" {...formItemLayout}>
              {getFieldDecorator('kindqty', { 
                  rules: [{ required: true, message: '请输入提供样版数' }]})(
                <InputNumber style={{width: '300px'}} placeholder="请输入提供样版数"/>
              )} 
            </FormItem>
            <FormItem label="上货款数" {...formItemLayout}>
              {getFieldDecorator('supplyqty', {
                rules: [{ required: true, message: '请输入上货款数' }]})(
                <InputNumber style={{width: '300px'}} placeholder="请输入上货款数"/>
              )} 
            </FormItem>
            <FormItem label="上市日期" {...formItemLayout}>
              {getFieldDecorator('indate', { 
                rules: [{ required: true, message: '请选择上市日期' }]})(
                <DatePicker style={{width: '300px'}} placeholder="请选择上市日期"/>
              )} 
            </FormItem>
            <FormItem label="审版日期" {...formItemLayout}>
              {getFieldDecorator('approvaldate', { 
                rules: [{ required: true, message: '请选择审版日期' }]})(
                <DatePicker style={{width: '300px'}} placeholder="请选择审版日期"/>
              )} 
            </FormItem>
            <FormItem label="上传图片截止日期" {...formItemLayout}>
              {getFieldDecorator('uploaddate', { 
                rules: [{ required: true, message: '请选择上传图片截止日期' }]})(
                <DatePicker style={{width: '300px'}} placeholder="请选择上传图片截止日期"/>
              )}
            </FormItem>
            <FormItem label="邮寄样衣日期" {...formItemLayout}>
              {getFieldDecorator('maildate', { 
                rules: [{ required: true, message: '请选择邮寄样衣日期' }]})(
                <DatePicker style={{width: '300px'}} placeholder="请选择邮寄样衣日期"/>
              )}
            </FormItem>
            <FormItem label="款式参考资料" {...formItemLayout}  extra="支持扩展名：.rar .zip .doc .docx .pdf .jpg .png .gif .jpeg .bmp">
              <FormFileUpload
                url="/Scm/Band/Upload"
                files = {file.uid?[file]: []}
                fileType={"image/jpeg,image/png,image/gif,image/bmp,image/jpeg,application/zip,application/rar,officedocument,application/pdf"} 
                onChange = {(res: any)=>{
                  this.setState({
                    ...this.state,
                    file: {
                      uid: res.files[0].guid
                    }
                  })
                }}
              />
            </FormItem>
            <FormItem label="说明" {...formItemLayout}>
              {getFieldDecorator('remarks')(<TextArea rows={4} />)} 
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting}>
                保存
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={()=>{this.props.history.goBack()}} >返回</Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    )
  }
}

export default Form.create()(BandForm)
